<template>
    <div class="min-h-screen bg-gray-100">
      <Navbar />
      
      <main class="container mx-auto px-4 py-8">
        <div class="mb-8">
          <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-900">仪表盘</h1>
          <p class="text-gray-600 mt-2">欢迎回来，{{ user?.name || '用户' }}</p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
          <!-- 卡片1：API调用次数 -->
          <div class="bg-white rounded-xl shadow-md p-6 transition-all duration-300 hover:shadow-lg">
            <div class="flex items-center justify-between">
              <div>
                <p class="text-gray-500 text-sm">API调用次数</p>
                <h3 class="text-2xl font-bold text-gray-900 mt-1">12,543</h3>
                <p class="text-green-500 text-sm mt-2 flex items-center">
                  <i class="fa fa-arrow-up mr-1"></i> 12% <span class="text-gray-500 ml-1">vs上月</span>
                </p>
              </div>
              <div class="h-12 w-12 bg-blue-100 rounded-full flex items-center justify-center">
                <i class="fa fa-exchange text-blue-500 text-xl"></i>
              </div>
            </div>
          </div>
          
          <!-- 卡片2：剩余信用额度 -->
          <div class="bg-white rounded-xl shadow-md p-6 transition-all duration-300 hover:shadow-lg">
            <div class="flex items-center justify-between">
              <div>
                <p class="text-gray-500 text-sm">剩余信用额度</p>
                <h3 class="text-2xl font-bold text-gray-900 mt-1">¥847.50</h3>
                <p class="text-red-500 text-sm mt-2 flex items-center">
                  <i class="fa fa-arrow-down mr-1"></i> 28% <span class="text-gray-500 ml-1">vs上月</span>
                </p>
              </div>
              <div class="h-12 w-12 bg-green-100 rounded-full flex items-center justify-center">
                <i class="fa fa-credit-card text-green-500 text-xl"></i>
              </div>
            </div>
          </div>
          
          <!-- 卡片3：活跃模型 -->
          <div class="bg-white rounded-xl shadow-md p-6 transition-all duration-300 hover:shadow-lg">
            <div class="flex items-center justify-between">
              <div>
                <p class="text-gray-500 text-sm">活跃模型</p>
                <h3 class="text-2xl font-bold text-gray-900 mt-1">5</h3>
                <p class="text-green-500 text-sm mt-2 flex items-center">
                  <i class="fa fa-arrow-up mr-1"></i> 2 <span class="text-gray-500 ml-1">新增</span>
                </p>
              </div>
              <div class="h-12 w-12 bg-purple-100 rounded-full flex items-center justify-center">
                <i class="fa fa-cubes text-purple-500 text-xl"></i>
              </div>
            </div>
          </div>
          
          <!-- 卡片4：项目数 -->
          <div class="bg-white rounded-xl shadow-md p-6 transition-all duration-300 hover:shadow-lg">
            <div class="flex items-center justify-between">
              <div>
                <p class="text-gray-500 text-sm">项目数</p>
                <h3 class="text-2xl font-bold text-gray-900 mt-1">3</h3>
                <p class="text-gray-500 text-sm mt-2 flex items-center">
                  <i class="fa fa-minus mr-1"></i> 0 <span class="text-gray-500 ml-1">vs上月</span>
                </p>
              </div>
              <div class="h-12 w-12 bg-yellow-100 rounded-full flex items-center justify-center">
                <i class="fa fa-folder-open text-yellow-500 text-xl"></i>
              </div>
            </div>
          </div>
        </div>
        
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
          <!-- 图表区域 -->
      <div class="lg:col-span-2 bg-white rounded-xl shadow-md p-6">
        <div class="flex justify-between items-center mb-6">
          <h3 class="text-lg font-bold text-gray-900">API调用趋势</h3>
          <div class="flex space-x-2">
            <button
              @click="changeChartType('line')"
              :class="{ 'bg-primary/10 text-primary': chartType === 'line' }"
              class="px-3 py-1 text-sm rounded-md hover:bg-gray-100 transition-colors"
            >
              折线图
            </button>
            <button
              @click="changeChartType('bar')"
              :class="{ 'bg-primary/10 text-primary': chartType === 'bar' }"
              class="px-3 py-1 text-sm rounded-md hover:bg-gray-100 transition-colors"
            >
              柱状图
            </button>
            <button
              @click="changeChartType('pie')"
              :class="{ 'bg-primary/10 text-primary': chartType === 'pie' }"
              class="px-3 py-1 text-sm rounded-md hover:bg-gray-100 transition-colors"
            >
              饼图
            </button>
          </div>
        </div>
        <div class="h-80 relative">
          <canvas ref="chartCanvas" class="w-full h-full" /> <!-- 添加 w-full h-full -->
          <div v-if="isLoading" class="absolute inset-0 flex items-center justify-center z-10">
            <div class="spinner-border text-primary" role="status">
              <span class="visually-hidden">Loading...</span>
            </div>
          </div>
        </div>
      </div>
          
          <!-- 最近活动 -->
          <div class="bg-white rounded-xl shadow-md p-6">
            <h3 class="text-lg font-bold text-gray-900 mb-6">最近活动</h3>
            <div class="space-y-6">
              <div class="flex items-start">
                <div class="flex-shrink-0 h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center">
                  <i class="fa fa-play text-blue-500"></i>
                </div>
                <div class="ml-4">
                  <p class="text-sm font-medium text-gray-900">启动了新会话</p>
                  <p class="text-xs text-gray-500">使用聊天助手模型</p>
                  <p class="text-xs text-gray-400 mt-1">2小时前</p>
                </div>
              </div>
              
              <div class="flex items-start">
                <div class="flex-shrink-0 h-10 w-10 bg-green-100 rounded-full flex items-center justify-center">
                  <i class="fa fa-credit-card text-green-500"></i>
                </div>
                <div class="ml-4">
                  <p class="text-sm font-medium text-gray-900">充值成功</p>
                  <p class="text-xs text-gray-500">充值金额：¥1000</p>
                  <p class="text-xs text-gray-400 mt-1">昨天</p>
                </div>
              </div>
              
              <div class="flex items-start">
                <div class="flex-shrink-0 h-10 w-10 bg-purple-100 rounded-full flex items-center justify-center">
                  <i class="fa fa-cubes text-purple-500"></i>
                </div>
                <div class="ml-4">
                  <p class="text-sm font-medium text-gray-900">添加了新模型</p>
                  <p class="text-xs text-gray-500">图像生成模型已激活</p>
                  <p class="text-xs text-gray-400 mt-1">3天前</p>
                </div>
              </div>
              
              <div class="flex items-start">
                <div class="flex-shrink-0 h-10 w-10 bg-red-100 rounded-full flex items-center justify-center">
                  <i class="fa fa-exclamation-triangle text-red-500"></i>
                </div>
                <div class="ml-4">
                  <p class="text-sm font-medium text-gray-900">API调用限制警告</p>
                  <p class="text-xs text-gray-500">您已使用本月配额的85%</p>
                  <p class="text-xs text-gray-400 mt-1">1周前</p>
                </div>
              </div>
            </div>
            
            <button class="w-full mt-6 py-2 text-sm text-primary hover:text-primary/80 transition-colors">
              查看所有活动 <i class="fa fa-arrow-right ml-1"></i>
            </button>
          </div>
        </div>
        
        <div class="mt-8 grid grid-cols-1 lg:grid-cols-3 gap-8">
          <!-- 活跃模型 -->
          <div class="bg-white rounded-xl shadow-md p-6">
            <h3 class="text-lg font-bold text-gray-900 mb-6">活跃模型</h3>
            <div class="space-y-4">
              <div class="flex items-center p-3 bg-gray-50 rounded-lg">
                <div class="h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center">
                  <i class="fa fa-comment text-blue-500"></i>
                </div>
                <div class="ml-3 flex-1">
                  <h4 class="text-sm font-medium text-gray-900">聊天助手</h4>
                  <p class="text-xs text-gray-500">使用次数: 8,542</p>
                </div>
                <div class="flex items-center">
                  <span class="text-xs text-gray-500 mr-2">68%</span>
                  <div class="w-16 h-2 bg-gray-200 rounded-full overflow-hidden">
                    <div class="h-full bg-blue-500 rounded-full" style="width: 68%"></div>
                  </div>
                </div>
              </div>
              
              <div class="flex items-center p-3 bg-gray-50 rounded-lg">
                <div class="h-10 w-10 bg-purple-100 rounded-full flex items-center justify-center">
                  <i class="fa fa-file-text text-purple-500"></i>
                </div>
                <div class="ml-3 flex-1">
                  <h4 class="text-sm font-medium text-gray-900">内容生成</h4>
                  <p class="text-xs text-gray-500">使用次数: 3,245</p>
                </div>
                <div class="flex items-center">
                  <span class="text-xs text-gray-500 mr-2">26%</span>
                  <div class="w-16 h-2 bg-gray-200 rounded-full overflow-hidden">
                    <div class="h-full bg-purple-500 rounded-full" style="width: 26%"></div>
                  </div>
                </div>
              </div>
              
              <div class="flex items-center p-3 bg-gray-50 rounded-lg">
                <div class="h-10 w-10 bg-green-100 rounded-full flex items-center justify-center">
                  <i class="fa fa-bar-chart text-green-500"></i>
                </div>
                <div class="ml-3 flex-1">
                  <h4 class="text-sm font-medium text-gray-900">数据分析</h4>
                  <p class="text-xs text-gray-500">使用次数: 756</p>
                </div>
                <div class="flex items-center">
                  <span class="text-xs text-gray-500 mr-2">6%</span>
                  <div class="w-16 h-2 bg-gray-200 rounded-full overflow-hidden">
                    <div class="h-full bg-green-500 rounded-full" style="width: 6%"></div>
                  </div>
                </div>
              </div>
            </div>
            
            <button class="w-full mt-6 py-2 text-sm text-primary hover:text-primary/80 transition-colors">
              管理所有模型 <i class="fa fa-arrow-right ml-1"></i>
            </button>
          </div>
          
          <!-- 即将到期的订阅 -->
          <div class="bg-white rounded-xl shadow-md p-6">
            <h3 class="text-lg font-bold text-gray-900 mb-6">订阅信息</h3>
            <div class="space-y-4">
              <div class="p-4 bg-primary/5 rounded-lg border border-primary/20">
                <div class="flex justify-between items-start">
                  <div>
                    <h4 class="font-medium text-gray-900">专业版</h4>
                    <p class="text-sm text-gray-500 mt-1">每月¥99.00</p>
                  </div>
                  <span class="px-2 py-1 text-xs font-medium bg-primary/10 text-primary rounded">活跃</span>
                </div>
                <div class="mt-4 flex justify-between items-center">
                  <div>
                    <p class="text-sm text-gray-500">到期日期</p>
                    <p class="font-medium text-gray-900">2025年7月15日</p>
                  </div>
                  <button class="px-3 py-1 text-sm border border-primary text-primary rounded hover:bg-primary/5 transition-colors">
                    管理订阅
                  </button>
                </div>
              </div>
              
              <div class="p-4 bg-gray-50 rounded-lg">
                <div class="flex items-center">
                  <div class="h-8 w-8 bg-blue-100 rounded-full flex items-center justify-center">
                    <i class="fa fa-bell text-blue-500 text-sm"></i>
                  </div>
                  <div class="ml-3">
                    <p class="text-sm text-gray-900">自动续费已开启</p>
                    <p class="text-xs text-gray-500">您的订阅将在到期时自动续费</p>
                  </div>
                </div>
              </div>
            </div>
            
            <button class="w-full mt-6 py-2 text-sm text-primary hover:text-primary/80 transition-colors">
              查看所有订阅 <i class="fa fa-arrow-right ml-1"></i>
            </button>
          </div>
          
          <!-- 快速操作 -->
          <div class="bg-white rounded-xl shadow-md p-6">
            <h3 class="text-lg font-bold text-gray-900 mb-6">快速操作</h3>
            <div class="space-y-3">
              <button class="w-full py-3 px-4 bg-primary text-white font-medium rounded-lg hover:bg-primary/90 transition-colors flex items-center justify-center">
                <i class="fa fa-plus mr-2"></i> 新建会话
              </button>
              <button class="w-full py-3 px-4 border border-gray-300 text-gray-700 font-medium rounded-lg hover:bg-gray-50 transition-colors flex items-center justify-center">
                <i class="fa fa-credit-card mr-2"></i> 充值账户
              </button>
              <button class="w-full py-3 px-4 border border-gray-300 text-gray-700 font-medium rounded-lg hover:bg-gray-50 transition-colors flex items-center justify-center">
                <i class="fa fa-cog mr-2"></i> 设置
              </button>
            </div>
            
            <div class="mt-6 p-4 bg-gray-50 rounded-lg">
              <h4 class="font-medium text-gray-900">需要帮助？</h4>
              <p class="text-sm text-gray-500 mt-1">查看我们的文档或联系支持团队</p>
              <div class="mt-3 flex space-x-2">
                <button class="flex-1 py-2 px-3 text-sm border border-gray-300 text-gray-700 rounded hover:bg-gray-50 transition-colors">
                  查看文档
                </button>
                <button class="flex-1 py-2 px-3 text-sm bg-primary text-white rounded hover:bg-primary/90 transition-colors">
                  联系支持
                </button>
              </div>
            </div>
          </div>
        </div>
      </main>
      
      <Footer />
    </div>
  </template>
  
  <script>
  import Navbar from '../components/Navbar.vue';
  import Footer from '../components/Footer.vue';
  import { ref, onMounted, onUnmounted, watch } from 'vue';
  import { useStore } from 'vuex';
  import Chart from 'chart.js/auto';
  
  export default {
    name: 'DashboardView',
    setup() {
      const store = useStore();
      const chartCanvas = ref(null);
      const chart = ref(null);
      const chartType = ref('line');
      const isLoading = ref(true);
  
      // 使用普通对象存储图表数据（非响应式）
      const chartData = {
        labels: [],
        datasets: []
      };
      const chartDataRef = ref(chartData); // 仅跟踪引用
  
      const initChart = () => {
        if (!chartCanvas.value) return;
        chart.value = new Chart(chartCanvas.value, {
          type: chartType.value,
          data: chartData, // 直接使用普通对象
          options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
              legend: { position: 'top' },
              tooltip: { mode: 'index', intersect: false }
            },
            scales: {
              y: { beginAtZero: true, grid: { drawBorder: false } },
              x: { grid: { display: false } }
            }
          }
        });
      };
  
      const loadChartData = () => {
        isLoading.value = true;
        setTimeout(() => {
          // 模拟数据（普通对象操作）
          chartData.labels = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
          chartData.datasets = [
            {
              label: '聊天助手',
              data: [1200, 1900, 1500, 2100, 1800, 1200, 900],
              borderColor: '#3B82F6',
              backgroundColor: 'rgba(59, 130, 246, 0.1)',
              tension: 0.4,
              fill: chartType.value === 'line' || chartType.value === 'area'
            },
            {
              label: '内容生成',
              data: [800, 600, 1000, 900, 1100, 700, 500],
              borderColor: '#A855F7',
              backgroundColor: 'rgba(168, 85, 247, 0.1)',
              tension: 0.4,
              fill: chartType.value === 'line' || chartType.value === 'area'
            },
            {
              label: '数据分析',
              data: [200, 300, 250, 400, 350, 150, 100],
              borderColor: '#10B981',
              backgroundColor: 'rgba(16, 185, 129, 0.1)',
              tension: 0.4,
              fill: chartType.value === 'line' || chartType.value === 'area'
            }
          ];
  
          chartDataRef.value = { ...chartData }; // 触发视图更新
          isLoading.value = false;
  
          if (chart.value) {
            chart.value.data = chartData;
            chart.value.update();
          } else {
            initChart();
          }
        }, 1000);
      };
  
      const handleResize = () => chart.value?.resize();
  
      // 添加 changeChartType 方法
      const changeChartType = (type) => {
        chartType.value = type;
      };
  
      onMounted(() => {
        loadChartData();
        window.addEventListener('resize', handleResize);
      });
  
      onUnmounted(() => {
        chart.value?.destroy();
        window.removeEventListener('resize', handleResize);
      });
  
      watch(chartType, () => {
        chart.value?.destroy();
        initChart();
      });
  
      return {
        chartCanvas,
        isLoading,
        chartType,
        changeChartType, // 确保方法被返回
        user: store.state.user
      };
    }
  };
  </script>

<style scoped>
.spinner-border {
  width: 1.5rem;
  height: 1.5rem;
}
</style>
      